<template>
  <div>
    <div class="title">
      <van-icon name="arrow-left" @click="$router.go(-1)"/>
      <span>提交订单</span>
    </div>
    <template v-for="add in address">
      <div class="address" :key="add.id" v-if="add.isDefault">
        <div class="county">
          <!--        <span>默认</span>-->
          <span>{{ add.province + ' ' + add.city + ' ' + add.county }}</span>
        </div>
        <div class="addressDetail">{{ add.addressDetail }}</div>
        <div class="user">
          <span class="name">{{ add.name }}</span>
          <span class="tel">{{ add.tel | disposeTel }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </template>
    <div class="mode-pay">
      <span>支付方式</span>
      <span>在线支付</span>
    </div>
    <div class="commodity">
      <div class="store">胖猫自营</div>
      <div class="box">
        <div class="img">
          <van-image width="80" height="80" :src="$route.query.picUrl"/>
        </div>
        <div class="num">共{{$route.query.selectedNum}}件</div>
      </div>
      <div class="send">
        <span>配送</span>
        <span>胖猫配送</span>
      </div>
    </div>
    <div class="message">
      <van-cell-group>
        <van-field v-model="msg" label="备注" placeholder="请输入备注信息" />
      </van-cell-group>
    </div>
    <!--  提交订单按钮  -->
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
export default {
  name: "SubOrder",
  data() {
    return {
      address: this.$store.state.address ? this.$store.state.address : null,
      msg: '',
      addId: null //地址id
    }
  },
  filters: {
    disposeTel(v) {
      let num1 = v.substr(0,3)
      let num2 = v.substr(-4)
      let str = '****'
      let tel = num1 + str + num2
      return tel
    }
  },
  methods: {
    async onSubmit () {
      // 提交订单
      await this.$post('order/submit',{
        cartId: this.$route.query.cartId,
        addressId: this.addId,
        couponId: 0, // 传0
        userCouponId: 0, // 传0
        message: this.msg,// 备注
        grouponRulesId: 0, // 传0
        grouponLinkId: 0 // 传0
      })
        .then(res => {
          console.log(res)
        })
      this.$router.push({name: 'obligation'})
    }
  },
  created() {
    console.log(this.$route.query)
    for (let i = 0; i < this.$store.state.address.length; i++) {
      if (this.$store.state.address[i].isDefault) {
        this.addId = this.$store.state.address[i].id
        return
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  position: relative;
  width: 375px;
  height: 45px;
  line-height: 45px;
  font-size: 18px;
  text-align: center;

  .van-icon-arrow-left {
    position: absolute;
    left: 0px;
    line-height: 45px;
    margin-left: 11px;
    font-size: 18px;
  }
}

.address {
  margin-left: 14px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 30px;
  position: relative;
  .county {
    font-weight: bold;
  }
  .name {
    margin-right: 7px;
  }
  .van-icon-arrow {
    position: absolute;
    margin-right: 14px;
    top: 0;
    right: 0;
    line-height: 90px;
  }
}

.mode-pay {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 28px;
  font-size: 16px;
  :first-child {
    margin-left: 14px;
  }
  :last-child {
    margin-right: 14px;
  }
}

.commodity {
  margin-left: 14px;
  margin-top: 28px;

  .store {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: bold;
  }

  .box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .img {
      .van-image {
        margin-right: 7px;
      }
    }
    .num {
      margin-right: 14px;
      line-height: 80px;
      font-size: 16px;
    }
  }

  .send {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 28px;
    font-size: 16px;

    :last-child {
      margin-right: 14px;
    }
  }
}

  .message {
    margin-top: 42px;
  }
</style>
